export class Message {
    private _box: UiBox = UiBox.create();
    private _content: UiText = UiText.create();
    private _isVisible: boolean = false;

    /**
     * 构造函数
     * @param content 消息内容
     */
    constructor(content: string) {
        console.log('(Client) Message constructor');
        // 注释掉自动执行的start方法，让外部控制显示流程
        this.start(content);
    }

    private async start(content: string): Promise<void> {
        await this.init();
        await this.show(content);
        await sleep(2000);
        await this.hide();
        this.destroy();
    }

    /**
     * 初始化UI元素，将其定位在屏幕上方（隐藏状态）
     */
    private init(): Promise<void> {
        return new Promise((resolve) => {
            // 将容器添加到UI根节点
            this._box.parent = ui;

            // 设置初始位置在屏幕上方，这样就看不见了
            this._box.position.offset.y = -200; // 假设高度为200，可根据实际调整

            // 设置一些基本样式
            this._box.size.offset.copy(
                Vec2.create({ x: screenWidth / 2, y: screenWidth / 10 })
            );
            this._box.position.offset.copy(
                Vec2.create({ x: screenWidth / 4, y: -screenWidth / 10 })
            );
            this._box.backgroundColor.copy(Vec3.create({ r: 0, g: 0, b: 0 }));
            this._box.backgroundOpacity = 0.8;

            // 设置文本样式
            this._content.parent = this._box;
            this._content.size.offset.copy(Vec2.create({ x: 0, y: 0 }));
            this._content.size.scale.copy(Vec2.create({ x: 1, y: 1 }));
            this._content.textColor.copy(
                Vec3.create({ r: 255, g: 255, b: 255 })
            );

            this._isVisible = false;
            resolve();
        });
    }

    /**
     * 显示UI，从屏幕上方移动到屏幕内
     * @param content 显示的消息内容
     */
    private show(content: string): Promise<void> {
        this._content.textContent = content;
        return new Promise((resolve) => {
            if (!this._box) {
                resolve();
                return;
            }

            // 使用动画将消息框从屏幕上方移到屏幕中央或顶部
            const targetY = 50; // 距离屏幕顶部的位置

            // 模拟移动动画
            let currentPosition = -200;
            const interval = setInterval(() => {
                currentPosition += 10;
                if (this._box) {
                    this._box.position.offset.y = currentPosition;
                }

                if (currentPosition >= targetY) {
                    if (this._box) {
                        this._box.position.offset.y = targetY;
                    }
                    clearInterval(interval);
                    this._isVisible = true;
                    resolve();
                }
            }, 16); // 约60fps
        });
    }

    /**
     * 隐藏UI，移回屏幕上方
     */
    private hide(): Promise<void> {
        return new Promise((resolve) => {
            if (!this._box) {
                resolve();
                return;
            }

            // 使用动画将消息框移回屏幕上方
            const startY = this._box.position.offset.y;
            const targetY = -200; // 屏幕上方

            // 模拟移动动画
            let currentPosition = startY;
            const interval = setInterval(() => {
                currentPosition -= 10;
                if (this._box) {
                    this._box.position.offset.y = currentPosition;
                }

                if (currentPosition <= targetY) {
                    if (this._box) {
                        this._box.position.offset.y = targetY;
                    }
                    clearInterval(interval);
                    this._isVisible = false;
                    resolve();
                }
            }, 16); // 约60fps
        });
    }

    /**
     * 销毁这个类的实例
     */
    private destroy(): void {
        if (this._box) {
            // 通过将parent设为空来销毁UI元素
            this._box.parent = undefined;
            this._box = null!;
        }

        if (this._content) {
            // 通过将parent设为空来销毁UI元素
            this._content.parent = undefined;
            this._content = null!;
        }
    }
}
